<template>
  <div class="seal-box">
    <div v-if="sealDetailStatus"
         class="pay-box">
      <span class="text-prompt">{{sealDetail.auditStatusDesc}}</span>
      <el-tooltip v-if="sealDetail.auditStatus === 3"
                  placement="right-start"
                  effect="light">
        <div slot="content">
          <template v-for="(ele, i) in sealDetail.refusalReason">
            <span :key="i"> {{ele}}<br /></span>
          </template>
        </div>
        <icon-svg class-name="ml10"
                  icon-name="wenhao" />
      </el-tooltip>
    </div>
    <div v-if="sealDetailAuditStatus"
         class="period">
      有效期：<span class="text-color">{{sealDetail.effectiveDate}}</span> 至 <span class="text-color">{{sealDetail.expireDate}}</span>
    </div>
    <div v-if="sealDetailPayStatus">
      <el-button v-if="sealDetail.auditStatus === 2"
                 class="btn"
                 type="primary"
                 @click="goDetail">续 期</el-button>
      <el-button v-if="sealDetail.auditStatus === 3"
                 class="btn"
                 type="primary">修改资料</el-button>
    </div>
    <div v-else>
      <el-button class="btn"
                 type="primary">申请开通</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElectronSeal',
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    sealDetail () {
      return this.value
    },
    sealDetailStatus () {
      return this.sealDetail?.auditStatus !== 2 && this.sealDetail?.payStatus === 1
    },
    sealDetailAuditStatus () {
      return this.sealDetail?.auditStatus === 2
    },
    sealDetailPayStatus () {
      return this.sealDetail?.auditStatus && this.sealDetail?.payStatus === 1
    }
  },
  methods: {
    goDetail () {
      this.$emit("goDetail")
    }
  }
}
</script>

<style scoped>
.seal-box {
  font-size: 16px;
}
.period {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.text-color {
  color: #eb662b;
}
.btn {
  position: absolute;
  bottom: 20px;
}
.pay-box {
  font-size: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.text-prompt {
  padding-right: 12px;
}
</style>